/*
 * @Author: mayijun
 * @Date: 2022-05-19 15:35:56
 * @LastEditors: mayijun
 * @LastEditTime: 2022-05-23 16:19:00
 */
//后台设置

import { ElTabPane, ElTabs, TabsPaneContext } from "element-plus";
import { defineComponent, onMounted, reactive } from "vue";
import ConditionSettings from "./components/conditionSettings";
import EnumSettings from "./components/enumSettings";
import FetchDataSettings from "./components/fetchDataSettings";
import './index.scss';

const BackgroundSettings = defineComponent({
  name: 'BackgroundSettings',
  components: {},
  setup: (props, { slots, attrs, emit }) => {

    const state: any = reactive({
      tabValue: 1,//页签的值
    });

    //页签切换
    const tabChange = (tab: TabsPaneContext, event: Event) => {

    }

    return () => {
      return (
        <div class="background-settings">
          <ElTabs class="tab-type" v-model={state.tabValue} onTab-click={tabChange}>
            <ElTabPane label="筛选条件设置" name={1}>
              {state.tabValue == 1 && (<ConditionSettings></ConditionSettings>)}
            </ElTabPane>
            {/* <ElTabPane label="取数设置" name={2}>
              {state.tabValue == 2 && (<FetchDataSettings></FetchDataSettings>)}
            </ElTabPane> */}
            <ElTabPane label="枚举值设置" name={3}>
              {state.tabValue == 3 && (<EnumSettings></EnumSettings>)}
            </ElTabPane>
          </ElTabs>
        </div>
      );
    };
  }
});

export default BackgroundSettings;
